/* Heroicon name: outline/exclamation-triangle */
function ExclamantionTriangleIcon() {
  return (
    <svg
      className="h-6 w-6 text-gray-600"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth="1.5"
      stroke="currentColor"
      aria-hidden="true"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M12 10.5v3.75m-9.303 3.376C1.83 19.126 2.914 21 4.645 21h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 4.88c-.866-1.501-3.032-1.501-3.898 0L2.697 17.626zM12 17.25h.007v.008H12v-.008z"
      />
    </svg>
  )
}

export default function MissingSplitItemDialog() {
  return (
    <div
      className="relative z-30"
      aria-labelledby="modal-title"
      role="dialog"
      aria-modal="true"
    >
      <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
      <div className="fixed inset-0 z-10 overflow-y-auto">
        <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
          <div className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
            <div className="sm:flex sm:items-start">
              <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-gray-100 sm:mx-0 sm:h-10 sm:w-10">
                <ExclamantionTriangleIcon />
              </div>
              <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                <h3
                  className="text-lg font-medium leading-6 text-gray-900"
                  id="modal-title"
                >
                  Incomplete Integration Setup
                </h3>
                <div className="mt-2">
                  <p className="text-sm text-gray-500">
                    Double check the following to ensure the example is set up
                    correctly:
                  </p>
                  <ol className="text-sm text-gray-500 list-disc ml-8 mt-2 flex gap-2 flex-col">
                    <li className="list-item list-disc">
                      Make sure you have the{' '}
                      <a
                        href="https://vercel.com/integrations/split"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        Split integration
                      </a>{' '}
                      installed.
                    </li>
                    <li className="list-item list-disc">
                      Make sure the integration is configured to sync your Split
                      project to a Vercel Edge Config. Go to vercel.com →
                      Integrations → Split → Manage → Configure.
                    </li>
                    <li className="list-item list-disc">
                      Make sure that Edge Config is connected to your project.
                      To do so, open vercel.com, find your project and click on
                      Storage. The Edge Config should show up there. If not, add
                      it.
                    </li>
                    <li className="list-item list-disc">
                      Ensure you have the{' '}
                      <span className="bg-gray-100 p-1 text-gray-900 rounded">
                        EDGE_CONFIG_SPLIT_ITEM_KEY
                      </span>{' '}
                      environment variable configured and it contains the item
                      key as specified by the Split integration. You can find
                      this key on your account at Vercel under Integrations →
                      Split → Manage → Configure → Edge Config Item Key
                    </li>
                    <li className="list-item list-disc">
                      Ensure the Edge Config actually contains your Split data.
                      Check whether your Edge Config contains a key called{' '}
                      <span className="bg-gray-100 p-1 text-gray-900 rounded">
                        {process.env.EDGE_CONFIG_SPLIT_ITEM_KEY}
                      </span>
                      , as defined by the EDGE_CONFIG_SPLIT_ITEM_KEY environment
                      variable. If it does not contain such a key, you can go to
                      Split and make a change to a feature flag. This causes the
                      integration to resync. You should then see the value in
                      your Edge Config.
                    </li>
                    <li className="list-item list-disc">
                      Pull your latest Environment Variables if you are
                      developing locally
                    </li>
                    <li className="list-item list-disc">
                      Restart or redeploy your application
                    </li>
                  </ol>
                  <p className="text-sm text-gray-500 mt-2">
                    Then reload the page and this dialog will go away if your
                    setup is correct.
                  </p>
                </div>
              </div>
            </div>
            <div className="mt-5 sm:mt-4 sm:ml-10 sm:flex sm:pl-4">
              <a
                href="https://github.com/vercel/examples/blob/main/edge-middleware/feature-flag-split/README.md#set-up-environment-variables"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex w-full justify-center rounded-md border border-transparent bg-gray-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 sm:w-auto sm:text-sm"
              >
                Open Documentation
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
